<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <style type="text/css">
            /* General menu styling */
            .nav {
                position: relative;
                margin: 0;
                padding: 0;
                line-height: 22px;
            }
            /* The main navigation link containers */
            .nav>li {
                display: block;
                float: left; /* Displaying them on the same line */
                margin: 0;
                padding: 0;
            }
            /* The main navigation links */
            .nav>li>a {
                /* Layout */
                display: block;
                position: relative;
                padding: 10px 20px;
                /* Text */
                font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif;
                color: #fff;
                font-size: 22px;
                text-decoration: none;
                /* Background */
                background: black; /* For older browsers */
                background: rgba(0, 0, 0, .6); /* Transparent background for modern browsers */
                /* Making the color to change on hover with a transition */
                -webkit-transition: color .3s ease-in;
                -moz-transition: color .3s ease-in;
                -o-transition: color .3s ease-in;
                -ms-transition: color .3s ease-in;
            }
            /* Changing the color on hover */
            .nav>li>a:hover, .nav>li:hover>a {
                color: #0fd0f9;
            }
            /* The links which contain dropdowns menu are wider, because they have a little arrow */
            .nav>.dropdown>a {
                padding: 10px 30px 10px 20px;
            }
            /* The arrow indicating the dropdown */
            .dropdown>a::after {
                content: "";
                position: absolute;
                top: 17px;
                right: 10px;
                width: 7px;
                height: 7px;
                -webkit-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                border-bottom: 1px solid #fff;
                border-right: 1px solid #fff;
            }
            /* Changing the color of the arrow on hover */	
            .dropdown>a:hover::after, .dropdown:hover>a::after {
                border-color: #0fd0f9;
            }
            /* The submenus */
            .nav ul {
                position: absolute;
                margin: 0;
                padding: 0;
                list-style: none;
                display: block;
            }
            /* General layout settings for the link containers of the submenus */
            .nav ul li {
                position: absolute;
                top: -9999px; /* Hiding them */
                height: 0px;
                display: block;
                margin: 0;
                padding: 0;
                /* Making them to expand their height with a transition, for a slide effect */
                -webkit-transition: height .1s ease-in;
                -moz-transition: height .1s ease-in;
                -o-transition: height .1s ease-in;
                -ms-transition: height .1s ease-in;
            }
            /* Displays the submenu links, by expading their containers (with a transition, previously defined) and by repositioning them */
            .dropdown:hover>ul>li {
                height: 30px;
                position: relative;
                top: auto;
            }
            /* The submenu links */
            .nav ul li a {
                /* Layout */
                padding: 4px 20px;
                width: 160px;
                display: block;
                position: relative;
                /* Text */
                font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif;
                color: #bbb;
                text-decoration: none;
                font-size: 16px;
                /* Background & effects */
                background: black;
                background: rgba(0, 0, 0, .6);
                -webkit-transition: color .3s ease-in, background .3s ease-in;
                -moz-transition: color .3s ease-in, background .3s ease-in;
                -o-transition: color .3s ease-in, background .3s ease-in;
                -ms-transition: color .3s ease-in, background .3s ease-in;
            }
            /* Changing the link's color and background on hover */
            .nav ul li:hover>a, .nav ul li a:hover {
                color: #0fd0f9;
                background: rgba(0, 0, 0, .75);
            }
            /* Making the level 2 (or higher) submenus to appear at the right of their parent */
            .nav ul .dropdown:hover ul {
                left: 200px;
                top: 0px;
            }
            /* The submenu links have a different arrow which indicates another dropdown submenu */
            .nav ul .dropdown a::after {
                width: 6px;
                height: 6px;
                border-bottom: 0;
                border-right: 1px solid #fff;
                border-top: 1px solid #fff;
                top: 12px;
            }
            /* Changing the color of the arrow on hover */
            .nav ul .dropdown:hover>a::after, .nav ul .dropdown>a:hover::after {
                border-right: 1px solid #0fd0f9;
                border-top: 1px solid #0fd0f9;
            }

        </style>
    </head>
    <body>
        <ul class="nav">
            <li class="level-1">
                <a href="#">BA LÁ TRÀ</a>
            </li>
            <li class="level-1">
                <a href="#">Giới Thiệu</a>
            </li>
            <li class="level-1">
                <a href="#">THỰC ĐƠN</a>
                <ul>
                    <li class="level-2">
                        <a href="#">Trà Sữa</a>
                    </li>
                    <li class="level-2">
                        <a href="#">Trà Sirup trái cây</a>
                    </li>
                    <li class="level-2">
                        <a href="#">Đá xay</a>
                    </li>
                    <li class="level-2">
                        <a href="#">Đệ nhất trà</a>
                    </li>
                    <li class="level-2">
                        <a href="#">Trà Nhật Bản trái cây</a>
                    </li>
                    <li class="level-2">
                        <a href="#">Ba lá trà</a>
                        <ul>
                            <li class="level-3">
                                <a href="#">Level 3.11</a>
                                <ul>
                                    <li class="level-3">
                                        <a href="#">Level 3.1sada</a>
                                    </li>
                                    <li class="level-3">
                                        <a href="#">Level 3.2dasd</a>
                                    </li>
                                    <li class="level-3">
                                        <a href="#">Level 3.1sada</a>
                                    </li>
                                    <li class="level-3">
                                        <a href="#">Level 3.2dasd</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="level-3">
                                <a href="#">Level 3.11</a>
                            </li>
                        </ul>
                    </li>
                    <li class="level-2">
                        <a href="#">Trà Nhật Bản</a>
                    </li>
                    <li class="level-2">
                        <a href="#">Milk shake</a>
                    </li>
                    <li class="level-2">
                        <a href="#">Soda Ý</a>
                    </li>
                    <li class="level-2">
                        <a href="#">Các loại hạt</a>
                    </li>
                    <li class="level-2">
                        <a href="#">Thức ăn nhẹ</a>
                        <ul>
                            <li class="level-3">
                                <a href="#">Level 3.1</a>
                            </li>
                            <li class="level-3">
                                <a href="#">Level 3.2</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="level-1">
                <a href="#">TIN TỨC - SỰ KIỆN</a>
            </li>
            <li class="level-1">
                <a href="#">LIÊN HỆ</a>
            </li>
        </ul>


        <script type="text/javascript">
            $(document).ready(function() {
                for (i = 1; i <= 3; i++) {
                    $("li.level-" + i).has("ul").addClass('dropdown');
                }
            });
        </script>
    </body>
</html>
